.server {
	position: relative;
	width: 100%;
	height: 100%;
	.address, .wait {
		width: 50%;
		max-height: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		overflow-y: auto;
		&::-webkit-scrollbar {
			display: none;
		}
		.var-cell {
			width: 100%;
		}
	}
	.wait {
		.var-cell {
			width: calc(100% - 20px);
			height: 44px;
			.buttons {
				width: 100%;
				display: flex;
				gap: 10px;
				align-items: center;
			}
			.check_ready {
				width: 20px;
				display: flex;
			}
		}
		.select_deck {
			width: 50%;
			height: 80px;
		}
	}
	.info {
		display: flex;
		flex-direction: column;
		font-size: max(2.5vh, 14px);
		color: white;
		position: fixed;
		right: 0;
		width: 40vw;
		height: 100vh;
		white-space: pre-line;
		background-color: rgba(0, 0, 0, 0.2);
		display: flex;
		flex-direction: column;
		gap: 5px;
		overflow-y: auto;
		span {
			margin-left: 10px;
		}
		&::-webkit-scrollbar {
			display: none;
		}
	}
	.Duel {
		position: absolute;
	}
}

.chat {
	border: 1px solid white;
	width: 40vw;
	min-width: 300px;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	.content {
		display: flex;
		flex-direction: column;
		height: calc(100% - 50px) !important;
		width: 100%;
		overflow: hidden;
		.message {
			height: calc(100% - 100px) !important;
			overflow-y: auto;
			:deep(.content-align-right) {
				color: black !important;
			}
			:deep(.content-align-left) {
				color: white !important;
			}
			&::-webkit-scrollbar {
				display: none;
			}
		}
		.send {
			height: 100px;
			width: calc(100% - 20px);
			margin-left: 10px;
			display: flex;
			gap: 10px;
			align-content: center;
			align-items: center;
			justify-content: center;
			justify-items: center;
			.var-input {
				width: 50%;
			}
			.voice_input {
				box-shadow: 0 0 10px 0 #00ffff;
			}
		}
	}
}

.select_tp {
	color: white;
	width: 20vw;
	height: 88px !important;
	display: grid;
	.var-button {
		background: rgba(0, 0, 0, 0.6) ;
	}
}